<template>
    <div class="gulu-tabs">
        <div class="gulu-tabs-nav" ref="container">
            <div 
            class="gulu-tabs-nav-item" 
            @click="select(t)"
            :class="{ selected: t === selected }"
            v-for="(t,index) in titles" 
            :ref="el => { if (t === selected) selectedItem = el }"
            :key="index">{{t}}</div>
            <div class="gulu-tabs-nav-indicator" ref="indicator"></div>
        </div>
        
        <div class="gulu-tabs-content">
            <component  :is="current" :key="current.props.title"/>
        </div>
    </div>
</template>
<script lang="ts">
import { computed, onMounted, ref , watchEffect } from 'vue'
import Tab from "./Tab.vue"
    export default {
        props: {
            selected: {
                type: String
            }
        },
        setup( props , context){
            const selectedItem = ref< HTMLDivElement >(null)
            const indicator = ref< HTMLDivElement >(null)
            const container = ref< HTMLDivElement >(null)
            const defaults = context.slots.default()
        
        onMounted(() => {
            watchEffect(() => {
                const { width } = selectedItem.value.getBoundingClientRect()
                indicator.value.style.width = width + 'px'
                const { left: left1 } = container.value.getBoundingClientRect()
                const { left: left2 } = selectedItem.value.getBoundingClientRect()
                const left = left2 - left1
                indicator.value.style.left = left + 'px'
            })
        })
        defaults.forEach((tag) => {
            if(tag.type !== Tab ) {
                throw new Error('Tabs 子标签必须是 Tab')
            }
        })
        const titles = defaults.map((tag) => {
            return tag.props.title
        })
        const current = computed(() => {
            
            return defaults.filter((tag) => {
                return tag.props.title === props.selected
            })[0]
        })
        
        const select = (title: String) => {
            context.emit("update:selected" , title)            
        }
        
        return {
            defaults, titles , current , select , selectedItem , indicator ,
            container
        }
    }
    }
</script>
<style lang="scss">
    $blue: #40a9ff;
    $color: #333;
    $border-color: #d9d9d9;
    .gulu-tabs {
        &-nav {
            display: flex;
            position: relative;
            color: $color;
            border-bottom: 1px solid $border-color;
            &-item {
            padding: 8px 0;
            margin: 0 16px;
            cursor: pointer;
            &:first-child {
                margin-left: 0;
            }
            &.selected {
                color: $blue;
            }
            }
            &-indicator {
            position: absolute;
            height: 3px;
            background: $blue;
            left: 0;
            bottom: -1px;
            width: 100px;
            transition: all 250ms;
        }
        }
        &-content {
            padding: 8px 0;
        }
    }
</style>